/* 逻辑
  1.点击按钮 触发点击事件
    1.调用小程序内部选择图片api
    2.获取图片的路径 数组格式
    3.把图片路径存入data中
    4.页面根据图片路径循环显示自定义组件
  2.点击图片 删除图片
    1.获取被点击的图片的索引
    2.获取data中的图片数组
    3.根据索引在图片数组中删除该数据
    4.把数组重新设置回data中
  3.用户点击提交按钮
    1.获取文本域的内容  类似于获取输入框内容
      1.在data中定义一个变量 表示文本yu内容
      2.绑定输入事件 事件触发的时候  把内容存入到变量中

    2.合法性验证
      1.验证不通过 弹窗提示
    3.验证通过 上传到专门的图片服务器中 返回图片外网链接
      1.内置api不支持多个上传 需要遍历图片数组 
      2.分别上传
      3.自己再维护数组 存放 图片上传后的外网链接
    4.文本域内容和图片路径提交到服务器中--模拟实现
    5.清空当前页面
    6.跳转到上一页
*/
Page({

  data: {
    tabs: [{
      id: 0,
      value: "体验问题",
      isActive: true
    }, {
      id: 1,
      value: "商品、商家投诉",
      isActive: false
    }],
    //被选中的图片路径 数组
    chooseImgs: [],
    //文本与内容
    textVal: ""
  },
  //外网的图片路径 数组
  UpLoadImgs: [],
  /* 从子组件传递过来的标题点击事件 */
  handleTabsItemChange(e) {
    //1.获取被点击的标题索引
    const {
      index
    } = e.detail;
    //2.修改原数组
    let {
      tabs
    } = this.data;
    tabs.forEach((v, i) => i === index ? v.isActive = true : v.isActive = false);
    //3.赋值到data中
    this.setData({
      tabs
    })
  },
  //点击按钮选择图片的事件
  handleChooseImg() {
    //2.调用小程序内部选择图片api
    wx.chooseImage({
      //图片数量
      count: 9,
      //图片格式 原图 压缩
      sizeType: ['original', 'compressed'],
      //图片来源 相册 相机
      sourceType: ['album', 'camera'],
      success: (result) => {
        this.setData({
          //图片数组进行拼接
          chooseImgs: [...this.data.chooseImgs, ...result.tempFilePaths]
        })
      }
    });
  },
  //点击自定义组件 删除图片
  handleRemoveImg(e) {
    //2.获取被点击图片的索引
    const {
      index
    } = e.currentTarget.dataset;
    //3.获取data中的图片数组
    let {
      chooseImgs
    } = this.data;
    //4.删除元素
    chooseImgs.splice(index, 1);
    //5.把数组重新设置回data中
    this.setData({
      chooseImgs
    })
  },
  //文本框输入事件
  handleTextInput(e) {
    this.setData({
      textVal: e.detail.value
    })
  },
  //点击提交按钮的事件
  handleFormSubmit() {
    //1.获取文本域的内容 图片数组
    const {
      textVal,
      chooseImgs
    } = this.data;
    //2.合法性验证
    if (!textVal.trim()) {
      //为空 不通过
      wx.showToast({
        title: '输入不合法',
        mask: true
      });
      return;
    }
    //3.准备上传到图片服务器 内置api
    //这个api不支持多个文件同时上传 只能遍历数组 分别上传
    //显示正在上传图标
    wx.showLoading({
      title: "正在上传中",
      mask: true
    });

    //判断是否有上传图片数组
    if (chooseImgs.length!=0) {
      chooseImgs.forEach((v, i) => {
        wx.uploadFile({
          //上传到哪里
          url: 'https://images.ac.cn/Home/Index/UploadAction/',
          //文件路径
          filePath: v,
          //上传的名称 后台来获取文件
          name: "file",
          //文本信息
          formData: {},
          success: (result) => {
            console.log(result);
            let url = JSON.parse(result.data).url;
            this.UpLoadImgs.push(url);
  
            //所有的图片都上传完毕才触发
            if (i === chooseImgs.length - 1) {
              //
              wx.hideLoading();
              console.log("把文本内容和图片数组提交到后台中");
              //提交成功 重置页面 返回上一页
              this.setData({
                textVal: "",
                chooseImgs: []
              })
              wx.navigateBack({
                delta: 1
              });
            }
          }
        });
      })
    } else {
      wx.hideLoading();
      console.log("用户只提交了文本");
      wx.navigateBack({
        delta: 1
      });
    }
  }
})